@charset "utf-8";
/* CSS Document */
.btn {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 60px;
  margin: 0 auto 2em;
  max-width: 230px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}
@media (min-width: 400px) {
  .btn {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btn:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btn:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btn:nth-of-type(5) {
    margin-right: 0;
  }
}
.btn:hover {
  text-decoration: none;
}

.btn-1 {
  background: #0463c9;
  font-weight: 100;
  margin-top:66px;
}
.btn-1 svg {
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-1 rect {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
}

.btn-1:hover {
  background: #b50005;
  font-weight: 900;
  letter-spacing: 1px;
  color:#fff;
}
.btn-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
          transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #fff;
  -webkit-transition: width 350ms ease-in-out;
          transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

.btn-3 {
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-transition: all 150ms linear;
          transition: all 150ms linear;
}

.btn-3:hover {
  background: #e02c26;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #ec817d;
  text-decoration: none;
  text-shadow: -1px -1px 0 #c2211c;
  -webkit-transition: all 250ms linear;
          transition: all 250ms linear;
}

.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btn-4 span {
  z-index: 20;
}
.btn-4:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btn-4:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}

.btnn{ display: inline-block; *display:inline; *zoom:1; height: 47px; width: 100%; background: #b50005; line-height: 47px; color: #fff; text-align: center;  text-decoration: none; position: relative;  }
.btnnt{ display: inline-block; *display:inline; *zoom:1; height: 52px; width: 59%;  text-decoration: none; position: relative; color:#333;  text-align: center; margin-top: 10px;}

.btn7{position:relative;color:#fff; background:#b50005; border:1px solid #b50005;-webkit-transition: background-color .3s, color .3s;transition: background-color .3s, color .3s}
.btn7:before {content: '';position: absolute;top: -15px;left: -15px;bottom: -15px;right: -15px;background: inherit;z-index: -1;opacity: 0.5;
-webkit-transform: scale3d(.6, .4, 1);transform: scale3d(.6, .4, 1); display:none\9;}
.btn7:hover {background:#0463c9; border-color:#0463c9;-webkit-transition: background-color .1s .3s, color .1s .3s;transition: background-color .1s .3s, color .1s .3s;-webkit-animation: anim-moema-1 .3s forwards;animation: anim-moema-1 .3s forwards}
.btn7:hover:before {-webkit-animation: anim-moema-2 .3s .3s forwards;animation: anim-moema-2 .3s .3s forwards;}

.btn14{  position:relative; color: #fff; background: #b50005; overflow: hidden; -webkit-transition: all .6s;transition: all .6s; font-size: 24px; line-height: 52px;}
.btn14:hover{ color:#fff; border-color:#0463c9;}
.btn14 .bgsqr1,.btn14 .bgsqr2,.btn14 .bgsqr3,.btn14 .bgsqr4{background:#0463c9;position: absolute;top:0; width: 0px;height: 100%;-webkit-transition: all 0.4s; transition: all 0.4s; opacity:0.35;}
.btn14 .bgsqr3,.btn14 .bgsqr4{ opacity:0.75;}
.btn14 .bgsqr1{ left:0;}
.btn14 .bgsqr2{ right:0}
.btn14 .bgsqr3{ right:0;}
.btn14 .bgsqr4{ left:0;}
.btn14:hover .bgsqr1,.btn14:hover .bgsqr2,.btn14:hover .bgsqr3,.btn14:hover .bgsqr4{ width:100%;}
.btn14:hover .bgsqr3,.btn14:hover .bgsqr4{-webkit-transition-delay:.4s;transition-delay:.4s;}
.btn14 span{ position:relative; z-index:1;}


.btnntt{ display: inline-block; *display:inline; *zoom:1; height: 84px; width: 100%;  text-decoration: none; position: relative; color:#333; }
.btn4{  -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s; background: rgba(4,99,201,0.7); color: #fff;}
.btn4:hover{ color:#0463c9; }
.btn4 .btnbg-x { background:#fff;position: absolute;z-index: -1;top: -1px;left: -1px;right: -1px; bottom: -1px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
	opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.btn4:hover .btnbg-x{
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
	opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.btn4 span{ position:relative; z-index:1;}





@-webkit-keyframes anim-moema-1 {
60% {
-webkit-transform:scale3d(.8, .8, 1);
transform:scale3d(.8, .8, 1)
}
85% {
-webkit-transform:scale3d(1.1, 1.1, 1);
transform:scale3d(1.1, 1.1, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes anim-moema-1 {
60% {
-webkit-transform:scale3d(.8, .8, 1);
transform:scale3d(.8, .8, 1)
}
85% {
-webkit-transform:scale3d(1.1, 1.1, 1);
transform:scale3d(1.1, 1.1, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@-webkit-keyframes anim-moema-2 {
to {
opacity:0;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes anim-moema-2 {
to {
opacity:0;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}